<style rel="stylesheet/scss" lang="scss" scoped>
.title1 {
  font-size: 14px;
  height: 32px;
  padding-left: 10px;
  line-height: 32px;
  background-color: #d7d7d8;
}
.itemform {
  margin-top: 20px;
  // display: inline-flex;
  // display: -webkit-inline-flex;
  // justify-content: flex-start;
  // flex-wrap: wrap;
}
.itemblock {
  // width: 50%;
}
.el-form--inline .el-form-item {
  margin-right: 0 !important;
}
.itembloc1 {
  width: 45%;
}
.itembloc2 {
  // width: 30%;
}
.green {
  display: inline-block;
}

.green-div {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 300px;
  height: 37px;
  background: inherit;
  background-color: rgba(95, 184, 120, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 37px;
  text-align: center;
}
#green-div1 {
  border-width: 0px;
  left: 0px;
  top: 0px;
  width: 222px;
  height: 37px;
  background: inherit;
  background-color: rgba(95, 184, 120, 1);
  border: none;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "Microsoft YaHei UI";
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: #ffffff;
  line-height: 37px;
}
.borderline {
  width: 100%;
  height: 2px;
  background-color: #d7d7d8;
}
.bottomline {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
}
.marginleft {
  margin-left: 20px;
}
.isearch {
  line-height: 40px;
}
.itop {
  margin-top: 10px;
}
.cus-conditon {
  margin-top: 10px;
  margin-left: 10px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <div class>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <custom-card title="价格计算" class="mt-20">
          <el-card class="box-card">
            <div class="title1">FOB价格</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="FOB：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.fobQuote" placeholder>
                      <template slot="append">￥</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="机型码：" class="itemblock2">
                    <el-select
                      v-model="formInline.plmModelNo"
                      filterable
                      remote
                      :placeholder="'请选择'"
                      :remote-method="getPlmModelNo"
                      @change="plmModelNoChange()"
                    >
                      <el-option
                        v-for="option in plmModelNoList"
                        :key="option.plmModelNo"
                        :label="option.plmModelNo"
                        :value="option.plmModelNo"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">客户条款</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="客户：" class="itemblock2">
                    <el-select
                      placeholder="请选择客户"
                      v-model="formInline.customerCode"
                      filterable
                      remote
                      reserve-keyword
                      :remote-method="getPdsCustomerByName"
                      clearable
                    >
                      <el-option
                        v-for="option in customerList"
                        :key="option.value"
                        :label="language=='en'?option.labelEnUs:option.labelZhCh"
                        :value="option.code"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="客户条款：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.customerTeramsRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">利润率</div>
            <div class="itemform">
              <el-form-item :label-width="'200px'" label="利润率：" class="itemblock1">
                <el-input type="number"  v-model="formInline.profitRate" placeholder>
                </el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">出口业务成本</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="不得免征和抵扣额比率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.deductionRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="美金操作费率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.usOperationRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="退税利息费率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.rebateRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="报价类型：" class="itemblock2">
                    <el-select placeholder="报价类型" v-model="formInline.quoteTypeDv" clearable>
                      <el-option
                        v-for="option in filter.options.pds_customer_offer_type"
                        :key="option.id"
                        :label="language=='en'?option.labelEnUs:option.labelZhCh"
                        :value="option.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <div class="borderline"></div>
          <div class="bottomline">
            <div class="green-div">产品全成本：{{formInline.fullCost}}</div>
          </div>
          <el-form-item :label-width="'200px'">
            <el-button type="primary" size="big" @click="submit(1)">计算成本</el-button>
          </el-form-item>
          <el-card class="box-card">
            <div class="title1">产品成本</div>
            <div class="itemform">
              <!-- <div class="isearch">
                  <i class="el-icon-search"></i>
              </div>-->
              <!-- <el-row :gutter="0">
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="标准工时：" class="itemblock">
                    <el-input type="number"  v-model="formInline.standardWorkingHours" placeholder></el-input>
                  </el-form-item>
                </el-col>
              </el-row> -->

              <!-- <el-form-item :label-width="'200px'" label="人工成本：" class="itemblock">
                <el-input type="number"  v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>
              <el-form-item :label-width="'200px'" label="包装成本  (未税)：" class="itemblock">
                <el-input type="number"  v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>
              <el-form-item :label-width="'200px'" label="变动制费：" class="itemblock">
                <el-input type="number"  v-model="formInline.user" placeholder=""></el-input>
              </el-form-item>-->
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">进口料件成本</div>
            <div class="itemform">
              <el-form-item :label-width="'200px'" label="本币未税成本RMB：" class="itemblock1">
                <el-input type="number"  v-model="formInline.currencyCost" placeholder></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">内陆运输成本</div>
            <div class="itemform">
              <el-form-item :label-width="'200px'" label="内陆运费比率：" class="itemblock1">
                <el-input type="number"  v-model="formInline.inlandRate" placeholder>
                </el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">产品项目开发费用</div>
            <div class="itemform">
              <el-form-item :label-width="'200px'" label="产品项目开发费用分摊：" class="itemblock1">
                <el-input type="number"  v-model="formInline.projectDevelopCost" placeholder></el-input>
              </el-form-item>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">公司管理费用分摊</div>
            <div class="itemform">
              <el-row>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="管理费用分摊比率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.manageCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="制造费用分摊比率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.manufactureCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="研发费用分摊比率（老产品)：" class="itembloc2">
                    <el-input type="number"  v-model="formInline.researchCostOldRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="研发费用分摊比率（新产品)：" class="itembloc2">
                    <el-input type="number"  v-model="formInline.researchCostNewRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="财务费用分摊比率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.financeCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" :xs="24">
                  <el-form-item :label-width="'200px'" label="营销费用分摊比率：" class="itemblock2">
                    <el-input type="number"  v-model="formInline.marketingCostRate" placeholder>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <el-card class="box-card">
            <div class="title1">抗风险系数</div>
            <div class="itemform">
              <el-form-item :label-width="'200px'" label="风险变动比例：" class="itemblock1">
                <el-input type="number"  v-model="formInline.riskChangeCostRate" placeholder>
                </el-input>
              </el-form-item>
            </div>
          </el-card>

          <div class="borderline"></div>
          <div class="bottomline">
            <div class="green-div">厂内制造成本合计{{formInline.productManufactureCost}}</div>
            <div class="green-div marginleft">FOB美金报价：{{formInline.fobUsQuote}}</div>
          </div>
          <el-form-item>
            <el-button type="primary" size="big" @click="submit(2)">计算明细</el-button>
          </el-form-item>
        </custom-card>
      </el-form>
    </div>
  </div>
</template>
<script>
// import * as api from '@/api/product/cost/index';
import * as saleApi from "@/api/sale/index";
import * as baseApi from "@/api/common/index";
import * as api from "@/api/price/index";
import * as packingApi from "@/api/packing/index";

export default {
  data() {
    return {
      searchContent: "",
      customerList: [],
      filter: {
        customerCode: null,
        options: {}
      },
      plmModelNoList: [],
      formInline: {},
      tableData: [],
      plmArticleNo: "",
      formData: undefined
    };
  },
  watch: {
    "formInline.customerCode"(val) {
      this.getTermsSum(val);
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    search() {
      api
        .getProductPrice({ plmArticleNo: this.plmArticleNo })
        .then(response => {
          this.tableData = [];
          this.tableData.push(
            response.data.pdsFileModelPbsDTO.pdsFileModelBaseDto
          );
          this.formInline = response.data.priceDetailsVO;
          this.formData = JSON.parse(JSON.stringify(response.data));
        });
    },
    getTermsSum(val) {
      api.getTermsSum({ customerCode: val }).then(response => {
        this.$set(this.formInline, "customerTeramsRate", response);
      });
    },
    // 获取字典选项
    getDict() {
      const codes = "pds_customer_offer_type";
      baseApi.getTypesValue(codes).then(res => {
        const arr = codes.split(",");
        this.filter.options = res.data;
      });
    },
    getPdsCustomerByName(val) {
      if (val !== "") {
        saleApi
          .getPdsCustomerByName({
            customerName: val
          })
          .then(res => {
            res.data.map(row => {
              row.labelEnUs = row.shortName;
              row.labelZhCh = row.shortName;
              row.value = row.code;
            });
            this.customerList = res.data;
          });
      }
    },
    // 机型号筛选下拉框选项
    getPlmModelNo(val) {
      if (val !== "") {
        api
          .getPlmAndPrams({
            keyWords: val
          })
          .then(res => {
            this.plmModelNoList = res.data;
          });
      }
    },
    plmModelNoChange() {
      this.plmModelNoList.map(item => {
        if (item.plmModelNo === this.formInline.plmModelNo) {
          this.formInline.deductionRate = item.deductionRate;
          //this.$set(this.formInline, "deductionRate", item.deductionRate);
          this.formInline.financeCostRate = item.financeCostRate;
          this.formInline.manageCostRate = item.manageCostRate;
          this.formInline.manufactureCostRate = item.manufactureCostRate;
          this.formInline.marketingCostRate = item.marketingCostRate;
          this.formInline.projectDevelopCost = item.projectDevelopCost;
          this.formInline.rebateRate = item.rebateRate;
          this.formInline.researchCostNewRate = item.researchCostNewRate;
          this.formInline.researchCostOldRate = item.researchCostOldRate;
          this.formInline.riskChangeCostRate = item.riskChangeCostRate;
          this.formInline.usOperationRate = item.usOperationRate;
        }
      });
    },
    submit(type) {
      const priceDetailsVO = {
        priceDetailsVO: { ...this.formInline }
      };

      // JSON.parse(
      //   JSON.stringify(this.formInline)
      // );

      api[type === 1 ? "countFullCostByQuote" : "countPriceDetailByFullCost"](
        priceDetailsVO
      ).then(res => {
        // this.$set(
        //   this.formInline,
        //   "fobQuote",
        //   res.data.priceDetailsVO.fobQuote
        // );
        if (type === 1) {
          this.$set(
            this.formInline,
            "fullCost",
            res.data.priceDetailsVO.fullCost
          );
        } else {
          this.$set(
            this.formInline,
            "productManufactureCost",
            res.data.priceDetailsVO.productManufactureCost
          );
        }

        // this.$set(
        //   this.formInline,
        //   "fobUsQuote",
        //   res.data.priceDetailsVO.fobUsQuote
        // );
      });
    }
  }
};
</script>
